<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html">

    <pm:page title="PrimeFaces Mobile Weather">

        <!-- Main View -->
        <pm:view id="main">
            <pm:header title="Weather">
                <f:facet name="right">
                    <p:button value="Settings" icon="gear" href="#settings" />
                </f:facet>
            </pm:header>

            <pm:content>
                <h:form id="mainForm">
                    <h:outputText value="Select City:" />
                    <h:selectOneMenu value="#{weatherController.city}">
                        <f:selectItems value="#{weatherController.cities}" />
                    </h:selectOneMenu>
                   
                    <p:separator />

                    <p:commandButton value="Get Forecast" update="display" actionListener="#{weatherController.retrieveConditions}"/>

                    <p:outputPanel layout="block" style="text-align:center">
                        <h:outputText id="display" value="#{weatherController.conditions}" escape="false" />
                    </p:outputPanel>
                </h:form>
            </pm:content>
        </pm:view>

        <!-- Settings View -->
        <pm:view id="settings">
            <pm:header title="Weather">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                <h:form id="settingsForm">

                    <h:outputText value="Select Unit:" />
                    <h:selectOneMenu value="#{weatherController.unit}">
                        <f:selectItem itemLabel="Celcius" itemValue="c" />
                        <f:selectItem itemLabel="Fahrenheit" itemValue="f" />
                    </h:selectOneMenu>

                    <p:separator />

                    <p:commandButton value="Save" actionListener="#{weatherController.saveSettings}" update=":mainForm:display"
                                      action="pm:main"/>
                    
                </h:form>
            </pm:content>
        </pm:view>

    </pm:page>

</f:view>
